<template>
	<view class="container">
		<view class="content">
			<image v-bind:class="className" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
		</view>
		
		
		<view class="data-section">
			<view>{{number + 1}}</view>
			<view>{{ok ? 'yes' : "no"}}</view>
			<view>{{message.split('').reverse().join('')}}</view>
		</view>

		
		<view class="section">
			<view v-for="(item, index) in arr" :key="item.id" style="color: #ff0000;">
				{{ item }}
			</view>
		</view>

		<view class="section">
			<view v-for="(item, index) in 4" :key="index" style="color: #00ff00;">
				<view :class="'list-' + (index % 2)">{{ index % 2 }}</view>
			</view>
		</view>

		<view class="section">
			<view v-for="(value, name, idx) in object" :key="idx">
				{{ idx }}.{{ name }}:{{ value }}
			</view>
		</view>

		<view class="section">
			<view v-for="(article, idx) in articles" :key="idx">
				<text>{{ idx }}.title:{{ article.title }}</text>
				<text>{{ idx }}.author:{{ article.author }}</text>
				<text>{{ idx }}.publishedAt:{{ article.publishedAt }}</text>
			</view>
		</view>

		<view class="section">
			<view v-for="item in arr" :key="item.id" style="color: #333300;">
				{{ item.id }}:{{ item.name }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello uniapp',
			className: "smalllogo",
			number: 1,
			ok: true,
			message: 'Hello Vue!',
			arr: [
				{ id: 1, name: 'uni-app' },
				{ id: 2, name: 'HTML' },
				{ id: 3, name: 'wechat' },
				{ id: 4, name: 'Android' }
			],
			object: {
				a: 'uniapp',
				b: 'vue'
			},
			articles: [{
				title: 'How to do lists in Vue',
				author: 'Jane Doe',
				publishedAt: '2020-04-10'
			}],
			clickCount: 0,
			isShow: true
		}
	},
	methods: {
		handleClick() {
			this.clickCount++
		},
		toggleShow() {
			this.isShow = !this.isShow
		}
	}
}
</script>

<style scoped>

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px;
	width: 100%;
}

.logo, .smalllogo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-bottom: 50rpx;
}

.text-area {
	text-align: center;
	width: 100%;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}


.data-section {
	width: 100%;
	text-align: center;
	margin: 20rpx 0;
}


.section {
	width: 100%;
	text-align: center;
	margin: 20rpx 0;
}


.section > view {
	margin: 5rpx 0;
}

.show-box {
	width: 200px;
	height: 40px;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
}
</style>
